<template>
	<view>

		<view class="charts-box" :style="ChartsStyle" v-for="(item,index) in chartDataArr">
			<qiun-data-charts :type="item.chartType" :opts="chartTypeOpts(item.chartType)"
				:chartData="item.chartData" />
		</view>
	</view>
</template>

<script>
	import ChartDataProcessor from '@/uni_modules/mc-ui/components/m-uCharts/static/chartData.js';
	export default {
		props: {
			chartType: {
				type: String,
				default: 'column'
			},
			chartData: {
				type: Object,
				default: {}
			},
			ChartsStyle: {
				type: [String, Object],
				default: () => {
					return {
						width: '100%',
						height: '300px',
					}
				}
			}
		},
		data() {
			return {
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {},
			};
		},
		computed: {
			chartDataArr() {

				const processor = new ChartDataProcessor();
				processor.getServerData(this.chartData);
				return processor.chartDataArr;
			},
		},
		methods: {
			chartTypeOpts(type) { // 根据type处理opts配置信息

				let color = ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
					"#ea7ccc"
				];


				let cloneDataOpts = {

					color: color,
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {},
					extra: {}
				}



				if (type == 'column') {
					cloneDataOpts.extra['column'] = {
						type: "group",
						width: 30,
						activeBgColor: "#000000",
						activeBgOpacity: 0.08
					}
					cloneDataOpts.yAxis = {
						data: [{
							min: 0
						}]
					}

				} else if (type == 'line') {
					cloneDataOpts.extra['line'] = {
						type: "curve",
						width: 2,
						activeType: "hollow"
					}

					cloneDataOpts.yAxis = {
						gridType: "dash",
						dashLength: 2,
						data: [{
							min: 0
						}]
					}
				} else if (type == 'ring') {


					cloneDataOpts = {
						rotate: false,
						rotateLock: false,
						color: color,
						padding: [5, 30, 5, 5],
						dataLabel: true,
						enableScroll: false,
						legend: {
							show: true,
							position: "right",
							lineHeight: 25
						},
						title: {
							name: " ",
							fontSize: 15,
							color: "#666666"
						},
						subtitle: {
							name: " ",
							fontSize: 25,
							color: "#7cb5ec"
						},
						extra: {
							ring: {
								ringWidth: 60,
								activeOpacity: 0.5,
								activeRadius: 10,
								offsetAngle: 0,
								labelWidth: 15,
								border: false,
								borderWidth: 3,
								borderColor: "#FFFFFF"
							}
						}
					}
				}



				return cloneDataOpts;

			},
		}
	}
</script>

<style lang="scss">
</style>